@each $var in row column {
  .#{$var} {
    display: flex;
    flex-direction: $var;
  }
}

@each $var in 20 50 100 {
  // width-persent
  .wp-#{$var} {
    width: $var * 1%;
  }
  // height-persent
  .hp-#{$var} {
    height: $var * 1%;
  }
  // top-persent
  .tp-#{$var} {
    top: $var * 1%;
  }
  // left-persent
  .lp-#{$var} {
    left: $var * 1%;
  }
}

@for $var from 0 through 200 {
  .pl-#{$var} {
    padding-left: $var * 1rpx;
  }

  .pr-#{$var} {
    padding-right: $var * 1rpx;
  }

  .pt-#{$var} {
    padding-top: $var * 1rpx;
  }

  .pb-#{$var} {
    padding-bottom: $var * 1rpx;
  }

  .ml-#{$var} {
    margin-left: $var * 1rpx;
  }

  .mr-#{$var} {
    margin-right: $var * 1rpx;
  }

  .mt-#{$var} {
    margin-top: $var * 1rpx;
  }

  .mb-#{$var} {
    margin-bottom: $var * 1rpx;
  }

  .p-#{$var} {
    padding: $var * 1rpx;
  }

  .pl-#{$var} {
    padding-left: $var * 1rpx;
  }

  .pr-#{$var} {
    padding-right: $var * 1rpx;
  }

  .pt-#{$var} {
    padding-top: $var * 1rpx;
  }

  .pb-#{$var} {
    padding-bottom: $var * 1rpx;
  }

  .gap-#{$var} {
    gap: $var * 1rpx;
  }

  .fs-#{$var} {
    font-size: $var * 1rpx;
  }

  .w-#{$var} {
    width: $var * 1rpx;
  }

  .h-#{$var} {
    height: $var * 1rpx;
  }

  .lh-#{$var} {
    line-height: $var * 1rpx;
  }

  .top-#{$var} {
    top: $var * 1rpx;
  }

  .bottom-#{$var} {
    bottom: $var * 1rpx;
  }

  .left-#{$var} {
    left: $var * 1rpx;
  }

  .right-#{$var} {
    right: $var * 1rpx;
  }

  .row-gap-#{$var} {
    row-gap: $var * 1rpx;
  }
}

@each $var in center flex-end flex-start end space-between space-around {
  .align-#{$var} {
    align-items: $var;
  }

  .justify-#{$var} {
    justify-content: $var;
  }

  .text-#{$var} {
    text-align: $var;
  }
}

@each $var in relative absolute fixed {
  .#{$var} {
    position: $var;
  }
}

.pointer {
  cursor: pointer;
}

.wrap {
  flex-wrap: wrap;
}

.nowrap {
  flex-wrap: nowrap;
}

.flex1 {
  flex: 1;
}

.mh-100 {
  min-height: 100vh;
}

.box {
  box-sizing: border-box;
}

@each $var in 400 500 bold bolder {
  .fw-#{$var} {
    font-weight: $var;
  }
}

.nowrap {
  white-space: nowrap;
}

@each $var in 3 4 6 8 10 12 14 16 {
  .grid-#{$var} {
    display: grid;
    grid-template-columns: repeat($var, #{$var + 'fr'});
  }

  .border-radius-#{$var} {
    border-radius: $var * 1rpx;
  }
}

.transition {
  transition: all 0.5s linear;
}

.cl-ef2e2e {
  color: #ef2e2e;
}

@each $var in 1 2 3 {
  .text-#{$var} {
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    display: -webkit-block;
    // 控制行数
    -webkit-line-clamp: $var;
    -webkit-box-orient: vertical;
    line-clamp: $var;
    box-orient: vertical;
  }
}

@each $var
  in 68dafe
  f7f7f7
  f5f5f5
  ececec
  408af7
  ffffff
  1e262f
  70c268
  F45754
  F8F8F8
{
  .bg-#{$var} {
    background: #{'#' + $var};
  }

  .cl-#{$var} {
    color: #{'#' + $var};
  }

  .border-#{$var} {
    border: 1rpx solid #{'#' + $var};
  }
}

@keyframes bubble {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
